<!-- 项目管理 新建 编辑  基础信息 step1-->
<template>
	<div class="baseWrapper">
		<el-breadcrumb separator="/" class="bread-title">
		  <el-breadcrumb-item :to="{ path: '/projectManagement' }">项目管理</el-breadcrumb-item>
		  <el-breadcrumb-item v-if="type==='add'">新建项目</el-breadcrumb-item>
		  <el-breadcrumb-item v-if="type==='edit'">编辑项目</el-breadcrumb-item>
		</el-breadcrumb>

		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
			<el-form-item label="项目名称" prop="name" required>
				<el-input v-model="ruleForm.name" style="width: 400px;"></el-input>
			</el-form-item>
			<el-form-item label="所在城市" prop="cityId" required>
				 <el-select v-model="ruleForm.cityId" style="width: 400px;" filterable >
					<el-option v-for="item in citys"
						:key="item.cityId"
						:label="item.city"
						:value="item.cityId">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="业务类型" prop="type" required>
				<el-select v-model="ruleForm.type" style="width: 400px;" filterable >
					<el-option v-for="item in typelist"
						:key="item.id"
						:label="item.label"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<!-- 当前城市下已有的业务流程 -->
			<el-form-item label="业务流程" prop="procedure" required>
				<el-select v-model="ruleForm.procedure" style="width: 400px;" filterable >
					
				</el-select>
			</el-form-item>
			<el-form-item label="所属开发商" prop="devname" required>
				<el-select
				  v-model="ruleForm.devname"
				  filterable
				  remote
				  reserve-keyword
				  placeholder="请输入开发商名称"
				  :remote-method="remoteMethod"
				  :loading="loading"
				  style="width: 400px;" >
				  <el-option
				    v-for="item in options"
				    :key="item.value"
				    :label="item.label"
				    :value="item.value">
				  </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="楼盘名称" prop="buildname" required>
				<el-select
				  v-model="ruleForm.buildname"
				  filterable
				  remote
				  reserve-keyword
				  placeholder="请输入楼盘名称"
				  :remote-method="remoteMethod2"
				  :loading="loading"
				  style="width: 400px;" >
				  <el-option
				    v-for="item in buildlist"
				    :key="item.value"
				    :label="item.label"
				    :value="item.value">
				  </el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="详细地址" prop="adress">
				<el-input v-model="ruleForm.adress" style="width: 600px;"></el-input>
			</el-form-item>

			<el-form-item class="flexstyle">
			  		<el-button type="primary"  @click="stephander('ruleForm')">下一步</el-button>
			</el-form-item>
		</el-form>


		
	</div>
</template>
<script>
	import api from '@/api/apiPath'
	export default {
		data(){
			return {
				type: this.$route.query.type, // 新增，编辑
				citys:[],
				options:[],
				buildlist:[],
				loading: false,
				ruleForm: {
					name:undefined,
					city:undefined,
					type:undefined,//业务类型
					procedure:undefined,//业务流程
					devname:undefined,//开发商名称
					buildname:undefined,//楼盘名称
					adress:undefined,
					cityId:undefined,
				},
				typelist:[
					{id:0, label:'新房产权'},
					{id:1, label:'二手房产权'},
					{id:2, label:'商业产权'},
				],
				rules:{
					name:[
						{required:true, message:'请输入项目名称',trigger:'blur'}
					],
					cityId:[
						{required:true, message:'请选择所在城市',trigger:'blur'}
					],
					type:[
						{required:true, message:'请选择业务类型',trigger:'blur'}
					],
					procedure:[
						{required:true, message:'请选择业务流程',trigger:'blur'}
					],
					devname:[
						{required:true, message:'请选择所属开发商',trigger:'blur'}
					],
					buildname:[
						{required:true, message:'请选择楼盘名称',trigger:'blur'}
					]
				}

			}
		},
		methods:{
			loadCity(){
				this.axios.post(api.CITYLIST).then(res => {
					if (res.data.code !== 200) {
						this.$message(res.data.msg)
					}else {
						this.citys = res.data.data.cityList
					}
				})
			},
			//模糊搜索请求地址
			remoteMethod(query) {
				console.log(query)
			},
			remoteMethod2(query){
				console.log(query)
			},
			stephander(formName){
				this.$refs[formName].validate((valid) => {
				  if (valid) {
				  	this.$router.push({path:'/houseInformationStep2',query:{type:'add'}})
				  	
				  }else {
				  	return false
				  }
				});
			}
		},
		created(){
			 this.loadCity();

		}



	}


	
</script>

<style lang="stylus" scoped>
	.baseWrapper
		width: 90%;
		height: 90%;
		.flexstyle 
			margin: 60px 0 0 300px;

</style>